Hay sitios que se hace dificil escoger un menú acorde con el diseño y otros donde dependiendo del menú le puede dar un aspecto recargado, sin embargo un menú con los enlaces más básicos es en mi opinión imprescindible y no hay que renunciar a tenerlo.
El menú que ofrecen en Webber 2.0 permanece oculto hasta que pasamos el cursor sobre la zona de la cabecera del blog.
Para que el menú haga la función de subir-bajar es necesario un script que podemos descargar desde aquí o la página del autor.

Una vez lo tenemos descargado y alojado en nuestro servidor lo añadimos en la plantilla justo antes de </head>

<script src='url-archivo-hide_menu-144c3a4.js' type='text/javascript'/>

Donde url-archivo-hide_menu-144c3a4.js lo sustituimos por la url de nuestro archivo alojado.

Sin necesidad de expandir la plantilla buscamos
<div id='outer-wrapper'><div id='wrap2'>

 justo después añadimos:
<div id='hit_area' onmouseover='toggleDown();'/>
<div id='menu_holder'>
<div id='nav'>

<ul>
<li><a href='url-enlace'>Texto a mostrar</a></li>
<li><a href='url-enlace'>Texto a mostrar</a></li>
<li><a href='url-enlace'>Texto a mostrar</a></li>
<li><a href='url-enlace'>Texto a mostrar</a></li>
<li><a href='url-enlace'>Texto a mostrar</a></li>
</ul>
</div>
</div>
<div id='hit_area2' onmouseover='toggleUp();'>

(La configuración del menú la dejaremos para el final)

CONTINUAR
Viviana

muy buena opcion, la implementare pronto

muchas gracias y buen 2010 !!!!!!!!!!

Responder
Gem@

:: Feliz año Viviana y Sofia, me alegra que te guste :)

Responder
Pedro Velasquez

se ve muy interesante, y no es mala idea empezar el año con un menu nuveo, por ahora me quedo con mi menu personalizado desde "Fuentes y Colores".
que se encuentra aqui mismo..

Responder
Gem@

:: Te quedó estupendo y no usa script Edu, de todas formas siempre hay tiempo de cambiar :)

Responder
José GDF

Hola, Gem@. Feliz año nuevo :)

Me coges instalando aplicaciones musicales en Windows, y he aprovechado para venir a saludarte.

Interesante el menú este que se esconde solo. Todavía no sé qué hacer con mi nuevo diseño, pero la plantilla esa azul en la que tienes la demo me ha dado ideas. Además, parece ser la tendencia ahora en los diseños: las transparencias y las esquinas redondeadas.

Lo del menú me parece interesante como idea, pero le veo una pega a la usabilidad, y es que, a no ser que la visita pase el ratón accidentalmente por la zona, no se entera que hay un menú...

Aunque por suerte, al estar arriba, como el ratón pasa casi seguro por ahí para, por ejemplo, cerrar la pestaña, pues casi seguro que al final se descubre.

¿Sabes qué sería para mi estupendo? Hacer que ese menú aparezca aunque estés leyendo en mitad de la página. Imagino que con un position: fixed se podría hacer. Pero: ¿donde lo pondría? ¿Se podría hacer así?

Responder
Susy

Resulta magnífico Gem@, creo que cuando retome el blog, pronto, lo pondré.

Me ha encantado.

Responder
Gem@

:: José GDF que buen overte por aquí aunque sea de cuando en cuando :D
Lo que dices del menú tienes razón a simple vista pasa desapercibido pero quien más quien menos es raro que no pase el cursor por esa zona aunque sea para marcar el título y actualizar la página.
De todas formas algo puede hacerse sobre ese tema, el último div que añadimos después de header-wrapper marca la zona del efecto onmouseover con Up es para subir y Down bajar.
Podemos prescindir del último div si añadimos el cierre de la etiqueta en la misma línea:
<div id='hit_area2' onmouseover='toggleUp();'/>

y esa línea la añadimos en una zona más transitada de la página por ejemplo antes de footer-wrapper, lo que se consigue es que el menú aparece cuando pasamos el cursor sobre cualquier zona y permanece estático hasta que actualiamos la página de nuevo.

:: Hola Susy, me alegra que te guste :D

Responder
fotografo1953

Me encanta el menú, pero tendrías que tener un apartado de "TORPES" y yo seria el primero de la lista.
No se como meterle mano, perdona es la verdad.
Un beso y FELIZ AÑO.
Tomás (fotografo)

Responder
Unknown

:) Bellísimo Piedra Preciosa, cuando uno visita un blog, mira mira y mueve el mouse por aquí por allí.

Buen fin del domingo y una semana espectacular :P

PD: el 'continuar' :)

Responder
Cokex

Ohhh, Que genial opcion para el menu, muy buena sin duda una novedad llamativa... GRACIAS
Por cierto que buena combinacion la plantilla Blue Water... ^^

Responder
rogikato

gema un favor..me podrias decir que scrips o codigo has usado para mostrar y ocultar eso de continuar?porfa mi correo rogil_12@hotmail

Responder
Gem@

:: Hola Tomás (fotografo1953) nunca he pensado en crear un apartado para torpes porque el que no salga bien algo no quiere decir que la persona sea torpe.
Depende de muchos factores, la plantilla, falta de claridad al explicarlo y en muchas ocasiones no seguir los pasos en el orden indicado.
Siempre recomiendo hacer pruebas en otro blog con la misma plantilla que utilizamos en el blog principal, y ante cualquier no dudes en preguntar :)

:: Igualmente para ti Graciela :)
¿el continuar?

:: Hola Coke gracias por comentar, la plantilla es un blog de pruebas, si alguien quiere la plantilla me lo dice y se la envío :)

:: rogikato utilizo el efecto Toogle:
http://gemablog-.blogspot.com/2009/10/efecto-toggle-en-los-gadgets-de-la.html

Responder
Cokex

Gema, necesito otra vez de tu ayuda, mira quiero Ocultar la parte del post que dice ''Labels:'' Ejemplo (labels:info), pero no la quiero eliminar, solo esconderla para que en la web no se vea sin tener que eliminarla definitivo, sabes como puedo hacer eso??? Muxas Gracias ^^

Responder
Gem@

:: Coke para ocultarla puedes hacerlo desde plantilla de diseño donde dice Entradas del blog/Editar no marques para que salgan las etiquetas y listo :)

Responder
Cokex

O.o Ohh si te entendi Gema muxxas graciasss ^^

Responder
Gem@

:: ;)

Responder
rlfox

:O
Creo que voy a liarla

Responder
Gem@

:: Cuenta hasta diez rlfox jajajaja es lo mejor en estos casos :)

Responder
Ami~

¡Gema@! Personalmente, amé este menú. Es muy elegante y combina perfectamente con el diseño de platilla que ahora hago.
El problema es que al momento de aplicarlo, me desarma toda la plantilla :(
Desplaza hacia abajo la linea a rayas en escala de grises (que iba on top), corre el título (este es un blog de pruebas, en el otro me corre la imagen del header y queda peor), y el menú con buscador se oculta tras las entradas :'(
Creo que el problema data en éste último, como tengo 2 elementos en header, así que cambié los datos y puse el máximo de elementos en header wrapper en 2, cambié los atributos, pero nada. Igual luce como el típico error de cuando te falta un "}"... pero francamente no sé que es y me gustaría solucionarlo...
También pensé en poner en body la franja de líneas grises, pero creo que eso no ayudaría al header y a la barrita con buscador a reubicarse :(
Luce complicado, ¿no?

Te dejo el blog para ver si puedes ayudarme:
http://cs-trial.blogspot.com/
¡Desde ya muchas gracias, linda! :D

Responder
Gem@

:: Complicado no Ami~ lo que ocurre que aunque el menú permanezca oculto ocupa un espacio y el mismo espacio no puede ser ocupado por otro div, es decir se puede poner un div entro de otro div pero adecuando las medidas para que uno osea mayor que otro y poder incluirlo o añadir uno detrás otro.
Prueba con este valor negativo de margin en el header y luego ya vemos la barrita decorativa.

#header h1 {
line-height:1.2em;
margin:-120px 5px 0;

Responder
Ami~

¡Muchas Gracias, Gem@! Funciona que en menú con buscador :)
Intenté aplicar lo mismo a la barrita decorativa pero se afecta el hover del menú oculto :S cuesta clickarlo para ir a los enlaces... es raro.
Así que dejé el cambio sólo en el buscador :P
Después ya se encontrará una solución maravillosa para lo otro.
¡Gracias, Gem@! :D

Responder
Gem@

:: La solución sería que la barrita formara parte de la imagen de fondo, es decir que como la única función que tiene es la de decorar pudieras incluirla en a imagen :)

Responder
Ami~

Parece que lo más fácil será eliminar la barrita. No sé cómo hacer para que la imagen de la barrita quede sólo arriba y en el resto se vea la imagen que ya tengo de fondo. Sería como el mismo problema... dos fondos :S uno de la imagen de la barrita y el fondo juntos y el otro sólo la imagen del fondo.

Responder
Gem@

:: Dos fondos no, yo me refería que si dominas algún editor de imágenes podías añadir la barrita sobre la imagen es decir que la barrita formara parte de la imagen de fondo situarla donde deseas que aparezca y en ese caso sería una sola imagen.

Responder
Ami~

Sí, si entendí cómo hacerlo. A lo que me refiero es que si edito una imagen que contenga a ambas, después al ponerla en el fondo la imagen se va a repetir así y la barrita se verá por todo el blog. Necesitaría configurarla de alguna forma que me permitiera hacer lo que quiero.. aunque aún no sé cómo :P buscaré más sobre tener más de un elemento en el header... o dónde puedo meter el otro fondo :S porque seguiría necesitando que la imagen sin la barrita se repitiera para el resto del fondo y la otra editada con barrita para la cabecera.

¡Gracias por todo Gem@!

Responder
Gem@

:: No tiene por qué repetirse si la añades así:
background: url('url-de-la-imagen')repeat-x;

Responder
Ami~

¡Gem@! ¡Lo conseguí sin editar la imagen! ¡y también gracias a ti!
Adecué lo que parece aquí http://gemablog-.blogspot.com/2008/04/barra-decorativa-en-la-cabecera-del.html a lo que necesitaba y funcionó :D

¡Eres un Sol, Gem@! ¡Millones de Gracias por todo!

Responder
Gem@

:: Son tantas las cosas escritas que me olvido de ellas y hasta alas buco fuera del blog :S
Me alegra esté resuelto :)

Responder
Gabriel
Este comentario ha sido eliminado por el autor.
Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top